.index-page {
  // min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding-bottom: 380px; // 为 NumberPad(~250px) + TabLayout(~120px) 预留空间

  // Tabs 组件样式
  .nut-tabs {
    background: #fff;
  }

  .tab-content {
    padding: 20px;
    min-height: 100px;
  }

  .page-content {
    // flex: 1;
    // padding: 60px 40px 40px;

    .page-title {
      font-size: 48px;
      font-weight: bold;
      color: #fa2c19;
      text-align: center;
      margin-bottom: 20px;
    }

    .page-desc {
      font-size: 28px;
      color: #666;
      text-align: center;
    }
  }

  // 图标选择示例
  .icon-selection-demo {
    width: 100%;
    margin: 5px 0;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .demo-title {
      font-size: 28px;
      color: #333;
      margin-bottom: 16px;
      font-weight: 600;
    }
  }

  // NumberPad 固定在 TabLayout 上方
  .number-pad-wrapper {
    position: fixed;
    bottom: 50px; // TabLayout 高度，留出空间不遮挡
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 50; // 低于 TabLayout
  }
}
.indexPageAmount {
  display: flex;
  background-color: #fefefe;
  border-radius: 5px;
  justify-content: space-between;
  padding: 10px 20px;
}
.selectionicon {
  width: 28px;
  height: 28px;
}

// 月度预算卡片
.budget-card {
  margin: 10px 12px 70px;
  padding: 14px 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  .budget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .budget-label {
      font-size: 16px;
      color: #333;
      font-weight: 600;
    }
  }

  .budget-stats {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    .budget-stat {
      flex: 1;
      background: #f8f9ff;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .stat-label {
        font-size: 14px;
        color: #666;
      }

      .stat-value {
        font-size: 16px;
        font-weight: 700;
        &.income { color: #16a34a; }
        &.expense { color: #ef4444; }
      }
    }
  }
}

/* 主题：深色模式覆盖 */
.index-page.theme-dark {
  background: #0f172a;

  .nut-tabs {
    background: #141a2a;
    color: #e5e7eb;
  }

  .icon-selection-demo {
    background: #141a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    .demo-title { color: #f5f7fb; }
  }

  .number-pad-wrapper {
    background: #141a2a;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.35);
  }

  .indexPageAmount {
    background-color: #141a2a;
    color: #e5e7eb;
  }

  .budget-card {
    background: #141a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);

    .budget-stats .budget-stat {
      background: rgba(255, 255, 255, 0.06);
      .stat-label { color: #b6c2d6; }
    }
    .budget-row .budget-label { color: #f5f7fb; }
  }
}